<template>
	<view class="page-history padding-bottom">
		<!-- 记录列表 -->
		<view v-if="DATA&& DATA.length != 0" class="sellerList-wrap padding-top padding-lr">
			<view v-for="(item,index) in 3" :key="index"
				class="sellerList-wrap-item margin-bottom-sm padding-sm flex justify-between align-center">
				<view class="flex-sub">
					<view @click="copyVincode(item.vin)" class="vin-code">
						title
					</view>
					<view class="name">上拉加载/下拉刷新</view>
					<view class="time">2023-11-21</view>
				</view>
				<view class="query-btns round">重新查询</view>
			</view>
		</view>
		<view v-else>
			<u-empty mode="data" text="暂无记录" marginTop="0" icon="/static/no-data.png"></u-empty>
		</view>

		<!-- 上拉 -->
		<uni-load-more v-if="DATA.length > 0" :status="loadingMore"></uni-load-more>

		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	import { apiGetList } from '@/request/api.js';

	export default {
		data() {
			return {
				//	刷新
				totalPage: 0, // 总页数
				currentPage: 1, //当前页
				loadingMore: 'more',
				DATA: [],
				scrollTop: 0,
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(option) {
			// this.init();
		},
		onPullDownRefresh() {
			// 下拉刷新
			this.currentPage = 1;
			this.totalPage = 0;
			this.loadingMore = 'more';

			this.DATA = [];
			this.init();
		},
		onReachBottom() {
			// 上拉加载
			if (this.currentPage != this.totalPage && this.currentPage < this.totalPage) {
				//	可加
				this.currentPage++;
				this.loadingMore = 'loading';
				this.init();
			} else {
				// 没有数据了
				this.loadingMore = 'no-more';
				return;
			}
		},
		methods: {
			/**
			 * 列表，上拉加载 | 下载刷新
			 * @param
			 * @return
			 */
			init() {
				uni.showLoading({
					title: '加载中'
				});
				apiGetList({
					page: this.currentPage,
					size: 15,
				}).then((res) => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.code == 0 && res.page.list != []) {
						this.totalPage = res.page.total;
						this.DATA = this.DATA.concat(res.page.list);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch((err) => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-history {
		min-height: 100vh;
		background: #f4f5f9;

		.sellerList-wrap {
			&-item {
				background: #FFFFFF;
				box-shadow: 0 0 4rpx 0 #cdcdcd;
				border-radius: 16rpx;

				.vin-code {
					font-size: 28rpx;
					font-weight: 400;
					color: #000000;
					margin-bottom: 20rpx;
				}

				.name {
					font-size: 28rpx;
					font-weight: 400;
					color: #A8A8A8;
					margin-bottom: 16rpx;
				}

				.time {
					font-size: 24rpx;
					font-weight: 400;
					color: #A8A8A8;
				}

				.query-btns {
					font-size: 24rpx;
					padding: 16rpx 30rpx;
					color: #FFFFFF;
					background: #FF6F19;
				}
			}
		}
	}
</style>